<template>
  <div>
    <h1 align="center">门店新增</h1>
    <table class="table table-bordered">
      <tr>
        <td align="center">门店名称</td>
        <td>
          <input type="text" v-model="state.m_name" />
        </td>
      </tr>
      <tr>
        <td align="center">门店地址</td>
        <td>
          <input type="text" v-model="state.m_dizhi" />
        </td>
      </tr>
      <tr>
        <td align="center">门店图片</td>
        <td>
          <input type="file" @change="upok" />
          <img :src="src" height="60" width="60" />
        </td>
      </tr>
      <tr>
        <td align="center">客服手机号</td>
        <td>
          <input type="text" v-model="state.m_phone" />
        </td>
      </tr>
      <tr>
        <td align="center">门店介绍</td>
        <td>
          <textarea cols="30" rows="3" v-model="state.m_desc"></textarea>
        </td>
      </tr>
      <tr>
        <td align="center">入住须知</td>
        <td>
          <textarea cols="30" rows="3" v-model="state.m_xuzhi"></textarea>
        </td>
      </tr>
      <tr>
        <td align="center">入住信息</td>
        <td>
          <textarea cols="30" rows="3" v-model="state.m_messs"></textarea>
        </td>
      </tr>
      <tr>
        <td align="center" colspan="2">
          <input type="button" value="新增" @click="ok" />
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
let data: any = reactive({
  state: {
    m_name: '',
    m_dizhi: '',
    m_photot: '',
    m_phone: '',
    m_desc: '',
    m_xuzhi: '',
    m_messs: ''
  },
  src: ''
});
let { state, src } = toRefs(data);

//图片上传
const upok = (e: any) => {
  let from = new FormData();
  let obj = e.target.files[0];
  from.append('file', obj);
  axios({
    url: '/api/Mupfailes/mupfiless',
    method: 'post',
    data: from
  })
    .then((res) => {
      console.log(res);
      src.value = 'https://localhost:7099' + res.data.fileName;
      state.value.m_photot = res.data.fileName;
    })
    .catch((err) => {
      console.log(err);
    });
};
//门店新增
const ok = () => {
  let obj = {
    m_name: state.value.m_name,
    m_dizhi: state.value.m_dizhi,
    m_photot: state.value.m_photot,
    m_phone: state.value.m_phone,
    m_desc: state.value.m_desc,
    m_xuzhi: state.value.m_xuzhi,
    m_messs: state.value.m_messs
  };
  axios({
    url: '/api/Member/Madd',
    method: 'post',
    data: obj
  })
    .then((res) => {
      console.log(res);
      if (res.data.data == 1) {
        alert('新增成功');
        router.push('/mshow');
      } else if (res.data.data == -1) {
        alert('门店名称重复');
        return;
      } else {
        alert('新增失败');
        return;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
